<template>
<!-- 圆形进度条 -->
<div class="circle-progress">
        <i :class="{'el-icon-video-pause':value,'el-icon-video-play':!value}" @click="changeActive"></i>
        <canvas class="canvas" ref="canvas"></canvas>
</div>

</template>



<script>
export default {
    props:{
        value:Boolean,
        proress:Number,
    },
    methods: {
        changeActive(){
            this.$emit('input',!this.value)
        }
    },
    mounted() {
        // mouted组件的时候才能进行生命周期的挂载
        const  canvas=this.$refs.canvas;
        canvas.width=50;
        canvas.height=50;
        // 绘制圆环
        const context=canvas.getContext('2d')
        context.save();
        context.beginPath();
        // 绘制大圆
        context.moveTo(25,25)
        context.arc(25,25,20,0,2*Math.PI*360,false)
        context.lineTo(25,25)
        // 绘制小圆
         context.moveTo(25,25)
        context.arc(25,25,24,0,2*Math.PI*360,false)
        context.closePath()
        context.fillStyle='rgba(212,68,57,0.3)'
        context.fill('evenodd');

        context.restore();

    },

}
</script>

<style scoped>
.circle-progress{
    width: 40px;
    height: 40px;
    position: relative;
}
.circle-progress i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 40px;
}
.canvas{
    position: absolute;
    top: 0;
    left: 0;

}

</style>
